import React,{useState,useEffect} from 'react'
import {Table, Modal, Button,Form,Input,message} from 'antd';
import {reqAddAdmin,reqGetUsers} from '../../api/index'
import './index.css'
export default function User(){
    const [data,setData] = useState([]);
    const [visible, setVisible] = useState(false);
    const [admin,setAdmin] = useState();
    const columns = [
      {
        title: 'id',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: 'openId',
        dataIndex: 'openId',
        key: 'openId',
      },
      {
        title: '微信昵称',
        dataIndex: 'nickName',
        key: 'nickName',
      },
      {
        title: '用户名',
        dataIndex: 'userName',
        key: 'userName',
      },
      {
        title: '居住地址',
        dataIndex: 'apartmentAddress',
        key: 'apartmentAddress',
      },
    ];
    const layout = {
        labelCol: {
          span: 8,
        },
        wrapperCol: {
          span: 16,
        },
      };
    const tailLayout = {
        wrapperCol: {
          offset: 8,
          span: 16,
        },
      };
    const showModal = () => {
      setVisible(true);
    };
  
    const handleOk = () => {
        setVisible(false);
    };
    const onFinish = (values) => {
        console.log('Success:', values);
        reqAddAdmin(values).then(res=>{
            if(res.code === 0){
                message.success('添加成功')
                // setData([])
                // reqGetUsers().then(res=>{
                //   if(res.code === 0){
                //     setData(res.data)
                //   }
                // })
                setVisible(false);
            }else{
                message.error('网络开小差了~')
            }
        }).catch(error=>{
            message.error('网络开小差了~')
        })
      };
    const handleCancel = () => {
      console.log('Clicked cancel button');
      setVisible(false);
    };
    useEffect(()=>{
      reqGetUsers().then(res=>{
        if(res.code === 0){
          setData(res.data)
        }
      })
    },[])
    return (
      <>
        <Button shape="round" className="button_style" type="primary" onClick={showModal}>
          新增管理员
        </Button>
        
        <Modal
          title="新增管理员"
          visible={visible}
          onOk={handleOk}
          onCancel={handleCancel}
          footer=''
        >
                <Form  className="formItem"
                {...layout}
                name="basic"
                initialValues={{
                    remember: true,
                }}
                onFinish={onFinish}
                >
                    <Form.Item
                        label="账号"
                        name="username"
                        rules={[
                        {
                            required: true,
                            message: '请输入账号!',
                        },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item className="buttonStyle">
                        <Button type="primary" htmlType="submit">
                            提交设置
                        </Button>
                    </Form.Item>
                </Form>
        </Modal>
        <Table className="tableStyle" columns={columns} dataSource={data} />
      </>
    );
  };
